<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>
<!--
   vue生命周期  从vue实例的创建到销毁的整个过程称之为vue的生命周期
   1. 初始化阶段
      beforeCreate()   vue实例只完成了事件和生命周期函数的初始化
      created()         数据代理已完成，模板没有编译
      beforeMount()     模板已经完成编译但尚未替换页面内容
      mounted()         模板的替换已经完成
   2. 运行阶段    监听data中数据的改变
        beforeUpdate()     页面数据还没有被重新渲染
        updated()          页面数据已经被重新渲染
   3. 销毁阶段
        beforeDestroy()
        destroyed()

   8个生命周期函数  钩子函数  在vue实例到达某个阶段时会自动调用

-->
<div id="app">
    <input type="text" v-model="title">
    <p>{{title}}</p>

    <table></table> <button>获取数据</button>
</div>


<script>
    let vm = new Vue({
        el: '#app',
        data: {
            title: 'vue life circle',
            users:[]
        },
        methods: {},
        beforeCreate() {
            console.log('-------------beforeCreate()-------------')
            console.log('title:', this.title)
            let title = document.querySelector('p').innerHTML
            console.log('p innerHTML :', title)
        },
        created() {
            console.log('-------------created()-------------')
            console.log('title:', this.title)
            let title = document.querySelector('p').innerHTML
            console.log('p innerHTML :', title)
            // 发送http请求最早的位置
        },
        beforeMount() {
            console.log('-------------beforeMount()-------------')
            let title = document.querySelector('p').innerHTML
            console.log('p innerHTML :', title)
        },
        mounted() {
            console.log('-------------mounted()-------------')
            let title = document.querySelector('p').innerHTML
            console.log('p innerHTML :', title)
            // 发送http请求
        },
        beforeUpdate() {
            console.log('-------------beforeUpdate()-------------')
            let title = document.querySelector('p').innerHTML
            console.log('p innerHTML :', title)
        },
        updated() {
            console.log('-------------updated()-------------')
            let title = document.querySelector('p').innerHTML
            console.log('p innerHTML :', title)
        },
        beforeDestroy() {
            console.log("------------beforeDestroy()-------------")
        },
        destroyed() {
            console.log("------------destroyed()-------------")
        }
    })
</script>
</body>
</html>
